<template>
  <div class="dashboard">
    <!-- 数据概览卡片 -->
    <el-row
      :gutter="20"
      class="panel-group"
    >
      <el-col
        :span="6"
        v-for="item in panelData"
        :key="item.title"
      >
        <div class="card-panel">
          <div
            class="card-panel-icon"
            :style="{ background: item.color }"
          >
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ item.title }}</div>
            <div class="card-panel-num">{{ item.value }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row
      :gutter="20"
      class="chart-row"
    >
      <!-- 访客量趋势 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>周访问量趋势</span>
            </div>
          </template>
          <div
            class="chart"
            ref="visitorsChart"
          ></div>
        </el-card>
      </el-col>

      <!-- 视频分类占比 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>视频分类占比</span>
            </div>
          </template>
          <div
            class="chart"
            ref="categoryPieChart"
          ></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 视频播放量统计 -->
    <el-row class="chart-row">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>各类型视频周播放量</span>
            </div>
          </template>
          <div
            class="chart"
            ref="playCountChart"
          ></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getStatistics } from '@/api/dashboard'

// 数据概览
const panelData = ref([
  {
    prop: 'totalUv',
    title: '总访问量',
    value: '0',
    icon: 'View',
    color: '#40c9c6'
  },
  {
    prop: 'totalPv',
    title: '视频播放量',
    value: '0',
    icon: 'VideoPlay',
    color: '#36a3f7'
  },
  {
    prop: 'totalCollect',
    title: '收藏量',
    value: '0',
    icon: 'Star',
    color: '#f4516c'
  },
  {
    prop: 'totalActiveUser',
    title: '活跃用户',
    value: '0',
    icon: 'User',
    color: '#34bfa3'
  }
])

// 图表引用
const visitorsChart = ref()
const categoryPieChart = ref()
const playCountChart = ref()

// 初始化访客量趋势图
const initVisitorsChart = () => {
  const chart = echarts.init(visitorsChart.value)
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: dashboardData.value.lastWeekUv || [0, 0, 0, 0, 0, 0],
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  })
}

// 初始化视频分类占比图
const initCategoryPieChart = () => {
  const chart = echarts.init(categoryPieChart.value)
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: dashboardData.value.videoTypeCountData || [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
}

// 初始化播放量统计图
const initPlayCountChart = () => {
  const chart = echarts.init(playCountChart.value)
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: dashboardData.value.videoTypeUvData || []
  })
}

const dashboardData = ref()
onMounted(async () => {
  dashboardData.value = await getStatistics()
  initPanelData()
  initVisitorsChart()
  initCategoryPieChart()
  initPlayCountChart()
})

/**
 * 初始化数据概览
 */
const initPanelData = () => {
  if (dashboardData.value && dashboardData.value.panelData) {
    panelData.value.forEach((item, index) => {
      item.value = numberFormat(dashboardData.value.panelData[item.prop])
    })
  }
}

/**
 * 数字格式化
 */
const numberFormat = (value: number) => {
  return value.toString().replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, function (s) {
    return s + ','
  })
}
</script>

<style lang="scss" scoped>
.dashboard {
  .panel-group {
    margin-bottom: 20px;

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      padding: 0 20px;

      .card-panel-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        .el-icon {
          font-size: 30px;
          color: #fff;
        }
      }

      .card-panel-description {
        .card-panel-text {
          font-size: 16px;
          margin-bottom: 12px;
          color: rgba(0, 0, 0, 0.45);
        }

        .card-panel-num {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;
  }

  .chart {
    height: 350px;
  }

  .card-header {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
